<script setup lang="ts">
import { ref } from 'vue'

// Props定义
interface Tab {
  id: string
  name: string
}

interface Props {
  tabs: Tab[]
  activeTab: string
}

const props = defineProps<Props>()

// 事件
const emit = defineEmits<{
  (e: 'change', tabId: string): void
}>()

// 切换标签
const handleTabClick = (tabId: string) => {
  emit('change', tabId)
}
</script>

<template>
  <div class="tab-navigation">
    <div class="flex border-b">
      <button
        v-for="tab in props.tabs"
        :key="tab.id"
        class="px-4 py-2 font-medium text-sm"
        :class="{ 'border-b-2 border-primary text-primary': tab.id === props.activeTab, 
                 'text-gray-500 hover:text-gray-700': tab.id !== props.activeTab }"
        @click="handleTabClick(tab.id)"
      >
        {{ tab.name }}
      </button>
    </div>
  </div>
</template>

<style scoped>
.tab-navigation {
  margin-bottom: 20px;
}
.text-primary {
  color: #ffb74d;
}
.border-primary {
  border-color: #ffb74d;
}
</style> 